<template>
  <n-progress :color="getProgressColor()" :percentage="done / all * 100">
    {{ done }} / {{ all }}
  </n-progress>
</template>

<script setup>

import {ref} from "vue";

const props = defineProps({
  done: Number,
  all: Number
})
const P_COLOR_FEW = ref('#ef5767')
const P_COLOR_NORMAL = ref('#f1ccb8')
const P_COLOR_ENOUGH = ref('#b8f1cc')

function getProgressColor() {
  const percent = props.done * 100 / props.all
  if (percent < 30) {
    return P_COLOR_FEW.value
  } else if (percent < 60) {
    return P_COLOR_NORMAL.value
  } else {
    return P_COLOR_ENOUGH.value
  }
}

</script>

<style scoped>

</style>